<!DOCTYPE html>
<html>
<head>
    <title>大学生英语阅读自主学习平台</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <link rel="stylesheet" type="text/css" href="PUBLIC/css/styles.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
     <script src="PUBLIC/js/md5.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .portfolio-header {
        position: relative;
        background-image: url('PUBLIC/img/transparent.jpg');
        }
        .portfolio-logo {
        background: url('PUBLIC/img/logo.png') 50% no-repeat;
        background-size: cover;
        height: 150px;
        width: 150px;
        margin: auto auto 10px;
        }
    </style>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <!-- 头部分 -->
        <header class="mdl-layout__header mdl-layout__header--waterfall portfolio-header">
            <div class="mdl-layout__header-row portfolio-logo-row">
                <span class="mdl-layout__title">
                    <div class="portfolio-logo"></div>
                    <span class="mdl-layout__title">English learning platform</span>
                </span>
            </div>
            <div class="mdl-layout__header-row portfolio-navigation-row mdl-layout--large-screen-only">
                <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                    <a class="mdl-navigation__link" href="{:url('index/index')}?book=1">单元选择</a>
                    <a class="mdl-navigation__link is-active" href="{:url('StudyText/index')}">课文学习</a>
                    <a class="mdl-navigation__link" href="{:url('MicroClass/index')}" >微课堂</a>
                    <a class="mdl-navigation__link" href="{:url('Practice/index')}" >巩固练习</a>
                    <a class="mdl-navigation__link" href="{:url('Test/index')}" >小测验</a>
                    <a class="mdl-navigation__link" href="{:url('Myself/index')}" >我</a>
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer mdl-layout--small-screen-only">
            <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                    <a class="mdl-navigation__link" href="{:url('index/index')}?book=1">单元选择</a>
                    <a class="mdl-navigation__link is-active" href="{:url('StudyText/index')}" >课文学习</a>
                    <a class="mdl-navigation__link" href="{:url('MicroClass/index')}" >微课堂</a>
                    <a class="mdl-navigation__link" href="{:url('Practice/index')}" >巩固练习</a>
                    <a class="mdl-navigation__link" href="{:url('Test/index')}" >小测验</a>
                    <a class="mdl-navigation__link" href="{:url('Myself/index')}" >我</a>
        </div>
        <main class="mdl-layout__content">
            <div class="mdl-grid portfolio-max-width">
                <div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp">
                    <div class="mdl-card__title">
                        <h2 class="mdl-card__title-text">{$data['Textname']}</h2>
                    </div>
                    <div class="mdl-card__media">
                        <img class="article-image" src="{$data['Textimages']}" border="0" alt="">
                    </div>
                    <div class="mdl-card__supporting-text">
                        <strong>author</strong>
                        <span>{$data['author']}</span>
                    </div>
                    <div class="mdl-grid portfolio-copy">
                        <div class="mdl-cell mdl-cell--12-col mdl-card__supporting-text no-padding ">
                            <p>
                                {$data['Article']}
                            </p>
                        </div>
                    </div>
                    <div class="mdl-grid portfolio-copy">
                    </div>
                    <div class="mdl-grid portfolio-copy">
                    </div>
                    <div class="mdl-grid portfolio-copy">
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
<script type="text/javascript">
 $(document).ready(function(){
    var q = 'Alex';
    var from = 'en';
    var to = 'zh';
    var appid = '20170717000064935';
    var salt = 3;
    var sign = hex_md5(appid+q+salt+'d3EbADxWEapRLFka1a14');
    var url = 'http://api.fanyi.baidu.com/api/trans/vip/translate?q='+q+'&from='+from+'&to='+to+'&appid='+appid+'&salt='+salt+'&sign='+sign;
    $.ajax({
    type: 'POST',
    url: url,
    dataType: 'jsonp',
    data: 'josnp' ,
    success: function(msg){
    }
    });
});   
</script>
</html>
